<template>
  <div class="container">
    <div class="top">
      <!-- 饼图 -->
      <div class="pie">
        <pie />
      </div>
      <div class="map">
        <mapEcharts />
      </div>
      <div class="radar">
        <radar />
      </div>
    </div>
    <div class="bottom">
      <div class="bar">
        <bar />
      </div>
      <div class="line">
        <LineEcharts />
      </div>
    </div>
  </div>
</template>

<script>

import pie from '@/views/dashboard/components/pie/pie.vue'
import radar from '@/views/dashboard/components/radar/radar.vue'
import bar from '@/views/dashboard/components/bar/bar.vue'
import LineEcharts from '@/views/dashboard/components/line/line.vue'
import mapEcharts from '@/views/dashboard/components/map/map.vue'

export default {
  name: 'VueAdminTemplateMasterIndex',
  components: {
    pie,
    radar,
    bar,
    LineEcharts,
    mapEcharts
  },
  data() {
    return {

    }
  },

  mounted() {

  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
body{
  width:100%;
  height:100%;
}
.container{
 background-image: linear-gradient(315deg , #1b1c32 0 , #244c91 100%);

  .top{
  display: flex;
  .pie{
  width:400px;
  height:600px;
  padding-top:100px;
  margin-right:10px;
  // background-color: pink;
      // border:1px solid black
}
.map{
// flex:1;
width:1000px;
// background-color: green;
    // border:1px solid black
}
.radar{
  width:600px;
  height:400px;
  padding-top:100px;
  margin-left:10px;
  // background-color: blue;
      // border:1px solid black
}
}
.bottom{
  display: flex;
  height:500px;
  width:100%;
  .bar{
    width:50%;
    // background-color: red;
        // border:1px solid black
      canvas{
        width:900px;
        width:50%;
      }
  }
  .line{
    width:50%;
    // background-color: yellow;
    // border:1px solid black
  }
}
}

</style>
